<template>
    <div style="width: 1200px;margin: 0 auto;">
        <div class="searchForm">
            <div>
                入库截止日期： 
        		<el-date-picker
        		      size="small"
        		      v-model="search_form.buyer_date"
        			  value-format="yyyy-MM-dd"
        		      type="date"
        		      placeholder="选择日期时间">
        		    </el-date-picker>
            </div>
            <!-- <div>
                商品名称： 
        		<el-input size="small" v-model="search_form.goods_name" 
        		placeholder="请输入商品名称"  
        		style="width:200px;"></el-input>
            </div> -->
           <div >
        		<div style="display: flex;">
        			<div>
        				供应商：
        			</div>
        			<div>
        				<selectCustomer :supp="search_form.supplier" 
						@getCustomerName="getCustomerName" />
        			</div>
        		</div>
            </div>
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <!-- <el-button size="mini" @click="clearSearch">重置/检索</el-button> -->
			</div>
			<div style="margin-top: 2px;margin-left: 10px;">
				<el-checkbox v-model="is_jc" border size="mini">寄存商品</el-checkbox>
			</div>
        </div>
		<br>
        <el-table  :data="list"  
			 border 
			  stripe
			>
			</el-table-column>
			<!-- <el-table-column  align="center" width="80"   prop="id" label="ID" /> -->
			<el-table-column  align="center" width="80"
				label="序号">
				<template slot-scope="scope">
				   <div v-if="scope.$index+1!=list.length">
					   {{scope.$index+1}}
				   </div>
				   <div v-else>
					   总计
				   </div>
				</template>
			</el-table-column>
			<el-table-column   width="350"
				label="商品名称">
				<template slot-scope="scope">
				   <div  style="cursor: pointer;"
							v-if="scope.$index!=list.length-1"
						   @click="showInfo(scope.row.goods_name)">
							{{scope.row.goods_name}}
				   </div>
				   <div v-else>
				   			{{scope.row.goods_name}}
				   </div>
				   <!-- {{scope.row.goods_name}} -->
				</template>
			</el-table-column>
			<el-table-column  align="center" width="80"   prop="inventory" label="库存数量" />
			<el-table-column  align="center" width="80"
				label="串号数量">
				<template slot-scope="scope">
				   <div>
						<!-- {{returnCodeLength(scope.row.code_arr)}} -->
						{{scope.row.inventory}}
				   </div>
				</template>
			</el-table-column>
			<el-table-column  align="center" width="80"
				label="库存金额">
				<template slot-scope="scope">
				   <div>
						{{scope.row.money_sum}}
				   </div>
				</template>
			</el-table-column>
			<el-table-column  align="center" width="80"
				label="平均成本">
				<template slot-scope="scope">
				   <div v-if="scope.$index!=list.length-1">
					   <span v-if="scope.row.inventory>0">
						{{(scope.row.money_sum/scope.row.inventory).toFixed(2)}}
					   </span>
					   <span v-else>
					   	 --
					   </span>
				   </div>
				</template>
			</el-table-column>
			<!-- <el-table-column  align="center" width="150"   prop="supplier" label="供应商" /> -->
			<el-table-column  align="center" width="150"  prop="cate" label="商品系列" />
			<el-table-column  align="center" width="150"   prop="brand" label="商品品牌" />
			<el-table-column  label="有无备注"  fixed="right"  align="center">
			      <template slot-scope="scope">
			          <!-- <div>
						  <div class="button_text" @click="showInfo(scope.row.goods_name)"
							v-if="scope.$index!=list.length-1"
							>
							  查看明细
						  </div>
					  </div> -->
					  <div>
						  <div
							style="color: red;"
							v-if="scope.$index!=list.length-1"
						   >
							  {{scope.row.is_remark==0?'':'有备注'}}
						  </div>
						  
					  </div>
			      </template>
			  </el-table-column>
			<!-- <el-table-column  align="center" width="200"  prop="add_time" label="添加时间" /> -->
        </el-table>
		<!-- <div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div> -->
		<el-dialog
		  :title="goods_name"
		  :close-on-click-modal="false"
		  :visible.sync="isShow"
		  width="1331px">
		  <showGoodsInfo @onSuccess="onSuccess" 
			:is_jc="is_jc"
			:supplier="search_form.supplier"
			:goods_name="goods_name" v-if="isShow" />
		</el-dialog>
    </div>
</template>
<script>
	import selectCustomer from '@/components/selectCustomer.vue'
	import showGoodsInfo from './components/showGoodsInfo.vue'
    export default {
        components:{
			selectCustomer,showGoodsInfo
        },

        data(){
            return {
				list:[],
                rowData:{},
				isShow:false,
				pageSize:10,
				page:1,
				page_totle:0,
				search_form:{
					supplier:'',
					buyer_date:"",
					goods_name:"",
					logistics_number:""
				},
				goods_name:'',
				is_jc:false
            }
        },
		watch:{
			is_jc:{
				handler(){
					this.search()
				}
			}
		},
        mounted(){
            document.title = '供应商库存日报'
			this.search_form.buyer_date = this.$utils.formatNowDate(2)
			// this.lodeList()
        },
        methods:{
			onSuccess(){
				this.isShow = false
				this.showInfo()
			},
			showInfo(goods_name){
				this.isShow = true
				this.goods_name = goods_name
			},
			returnCodeLength(strArr){
				if(strArr){
					return JSON.parse(strArr).length
				}
			},
			getCustomerName(val){
				this.search_form.supplier = val
			},
			
			
			
            lodeList(){
				if(!this.search_form.supplier) return this.$message.error('请选择供应商')
				let params = {
					search_form:this.search_form,
					is_jc:this.is_jc
				}
				this.$post('/buyerSys/getInventorySupplierList',params,res=>{
					let result = res.data.data
					let list = []
					for(let i in result){
						let arr = result[i]
						let is_remark = 0
						console.log(arr,33333)
						for(let element of arr){
							if(element.remark){
								is_remark = 1
							}
						}
						if(arr.length){
							let obj = {
								id:arr[0].id,
								goods_name:arr[0].goods_name,
								inventory:arr.length,
								money_sum:0,
								goods_type:arr[0].goods_type,
								brand:arr[0].brand,
								cate:arr[0].cate,
								is_remark:is_remark
							}
							for(let item of arr){
								obj.money_sum+=item.price*1
							}
							list.push(obj)
						}
					}
					this.list = list
					console.log(list,4444444)
					if(this.list.length){
						let inventory = 0
						let money_sum = 0
						for(let item of this.list){
						   inventory+=item.inventory	
						   money_sum+=item.money_sum*1
						}
						
						this.list.push({
							id:'合计',
							goods_name:this.list.length,
							inventory:inventory,
							code_arr_length:inventory,
							money_sum:money_sum
						})
					}
				})
			},            
        }
    }
</script>
